﻿<style type="text/css">
   #rightNav
   {
       position:relative;
       margin:0px;
       padding:0px;
       width:100%;
       }
#rightNav li
{
    
     width:130px;
     padding:20px 0px;
     vertical-align:text-top;
     list-style-type:none;     
     margin:3px 0px;
     float:left;
     
    
}
 #rightNav li.accent-bg
    {
        background-position: right bottom;
        background-repeat: no-repeat;
        background-image:url('@Url.Content("~/Content/arrow.png")');
    }
#rightNav li a
{
    
    margin-left:3px;
    text-decoration:none;
    color:White;
}

</style>
<script type="text/javascript">
    $(function () {

        $("#rightNav li").each(function () { $(this).addClass("accent-bg"); });
        
    });
</script>
<ul id="rightNav">
    <li><a href="#"> Waiting List<span class="alert">20</span></a></li>
    <li><a href="#">Assigned<span class="alert">5</span></a></li>
    <li><a href="#">Visit</a></li>
    <li><a href="#">Inbox<span class="alert">1</span> </a></li>
</ul>
